@charset "utf-8";

$color:#00b7ee;

.web {
    width:1000px;
    margin:0 auto;
    // 公共头部样式
    header {
        .border-top {
            height:24px;
            background-color: $color;
        }
        // 头部内容样式
        .header-content {
            display:flex;
            align-items:center;
            height:116px;
            // logo样式
            .login {
                width:121px;
                height:63px;
                margin-left:73px;
                margin-right:70px;
                img {
                    width:100%;
                    height:100%;
                }
            }
            // 导航栏样式
            nav {
                transform: translateY(10px);
                ul {
                    display:flex;
                    li {
                        margin-right:18px;
                    }
                    li.active {
                        position:relative;
                        &::after {
                            content:"__";
                            position:absolute;
                            top:7px;
                            left:50%;
                            transform:translateX(-50%);
                        }
                    }
                }
            }
            // 搜索框样式
            .search {
                position:relative;
                transform: translateY(10px);
                margin-left:30px;
                width:216px;
                height:30px;
                &::after {
                    content:'';
                    position:absolute;
                    top:5px;
                    right:8px;
                    width:26px;
                    height:21px;
                    background-image: url('../images/search.png');
                }
                input {
                    width:100%;
                    height:100%;
                }
            }
        }
        // 头部广告栏样式
        .header-banner {
            width:100%;
            height:400px;
            img {
                width:100%;
                height:100%;
            }
        }
    }

    // 公共底部样式
    footer {
        hr {
            width: 1000px;
            height: 1px;
            background-color: #2f4d6b;
            opacity: 0.1;
        }
        // 底部内容样式
        .footer {
            display:flex;
            margin-top:44px;
            ul {
                font-size:12px;
                letter-spacing:3px;
                &:first-child {
                    margin-left:51px;
                    margin-right:55px;
                }
                &:nth-child(2) {
                    margin-right:109px;
                }
                &:nth-child(3) {
                    margin-right:53px;
                }
                li {
                    margin-bottom:9px;
                    &:first-child {
                        margin-bottom:17px;
                        font-size:16px;
                        font-weight:bold;
                    }
                }
            }
            .connect {
                margin-left:63px;
                margin-right:0px;
                width: 245px;
                height: 90px;
                img {
                    width:100%;
                    height:100%;
                }
            }
        }
        // 版权内容样式
        .border-bottom {
            margin-top:24px;
            width:1000px;
            height:70px;
            background-color: $color;
            p {
                transform:translateY(42px);
                font-size:12px;
                text-align:center;
            }
        }
    }
}